<template>
  <view class="con-my-wraper">
    <u-navbar title="我的" :placeholder="true" :safeAreaInsetTop="true">
      <view class="u-nav-slot" slot="left"></view>
    </u-navbar>
    <!-- 头部信息 -->
    <view class="head-contatiner">
      <image class="logo" src="/static/my-img/组 16(5).png"></image>
      <view>
        <view
          class="head-enterpriseName"
          v-if="
            InfouSerLevel == '1' || InfouSerLevel == '' || InfouSerLevel == null
          "
        >
          {{ enterpriseName }}
        </view>
        <view class="head-enterpriseName" v-else-if="InfouSerLevel == '2' && staff">{{ userInfo.nickName }}</view>
        <view class="head-enterpriseName" v-else-if="InfouSerLevel == '2' || InfouSerLevel == '3' || InfouSerLevel == '3'">
          {{  userInfo.stationName }}
        </view>
        <view class="head-phone">{{ phone }}</view>
      </view>
    </view>
    <!-- 功能列表 -->
    <view class="menu-contatiner">
      <view class="menu-cygn"> 常用功能 </view>
      <view class="all-ioc">
        <view
          span="3"
          class="menu-item"
          v-for="item in reportList"
          :key="item.id"
          @click="skipPage(item)"
        >
          <view class="menu-viewimg">
            <image class="menu-img" :src="item.iconUrl" />
          </view>
          <view class="menu-text">{{ item.name }}</view>
        </view>
        <view span="3" class="menu-item">
          <view class="menu-viewimg">
            <image
              class="menu-img"
              src="../../static/my-img/组 15@2x.png"
              @click="setTings"
            />
          </view>
          <view class="menu-text">设置</view>
        </view>
      </view>
      
      <!-- <view class="operate-container">
        <view class="operate-button" @click="handleExit">退出登录 </view>
      </view> -->

      <u-toast ref="uToast" />
    </view>
  </view>
</template>
<script>
import { getUserInfo } from "@/util/info.js";

import { querySerialize } from "@/util/utils.js";
import { logout, getEnterpriseandStation, cancelCoupon, getUserPermissions, couponDestroy, reportList, employeePermission } from "@/common/yftx-api.js";
import { getToken, removeToken } from "@/util/auth.js";
import store from "../../store";
export default {
  data() {
    return {
      staff: false,
      reportList: [],
      userName: "", // 登录账
      nickName: "", // 用户名
      phone: "", // 手机号
      stationList: "", // 油站名
      enterpriseName: "", // 油企名
      InfouSerLevel: null, // 用户级别
      userId: "",
      userInfo: {},
      userLevel22: null,
    };
  },
  async onShow() {
    // 页面展示时，触发。 可以调用多次
    this.init();
   
      await this.getStaff()
      await this.getUserInfouSerLevel();
    
    this.getReportList();
    
  },

  methods: {
  // 判断是否是员工权限
  async getStaff() {
	  const res = await employeePermission();
      this.staff = res.data.staff;
    },
    // 获取常用菜单
    async getReportList() {
      const res = await reportList({ userId: this.userInfo.userId });
      if (res.data && res.data.length) {
        let list = res.data.filter((item) => item.status === 1);
        this.reportList = list;
      } else {
        this.reportList = [];
      }
    },

    // 扫码核销
    handleScanCode() {
      let cancelCouponDto = {
        oilPersonnelId: store.state.userInfo.userId,
        stationId: store.state.userInfo.stationId,
      };
      uni.scanCode({
        onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
        scanType: ["qrCode"], // 扫码类型 qrCode二维码
        success: (res) => {
          // cancelCouponDto.couponNo = res.result.substring(4);
          cancelCouponDto.couponNo = res.result;
          // 调用后端核销接口
          cancelCoupon(cancelCouponDto).then((res) => {
            if (res && res.code === 200) {
              let params = res.data;
              store.commit("SET_COUPONINFO", res.data); // 保存优惠券信息
              uni.setStorageSync("couponInfo", res.data);

              var paramsString = Object.keys(params)
                .map((key) => key + "=" + params[key])
                .join("&");
              uni.navigateTo({
                url: `./result?${paramsString}`,
              });
            } else {
              uni.showToast({
                title: res.msg,
                icon: "error",
                duration: 5000,
              });
            }
          });
        },
        fail: (err) => {
          uni.showToast({
            title: err,
            icon: "error",
            duration: 5000,
          });
        },
      });
    },

    async init() {
      this.nickName = getUserInfo("nickName");
      this.userName = uni.getStorageSync("username");
      this.phone = uni.getStorageSync("phone");

      getEnterpriseandStation().then((res) => {
        if (res && res.code === 200) {
          if (res.data.stationList) {
            this.stationList = res.data.stationList.join("，");
          }
          this.enterpriseName = res.data.enterpriseName;
        }
      });
    },

    // 获取用户等级
    async getUserInfouSerLevel() {
      const level = await getUserInfo("userLevel");
      this.InfouSerLevel = level;  

      // 这个用户等级仅仅用来控制油价调增的
      const userInfo = await getUserInfo("userInfo");
      this.userInfo = JSON.parse(userInfo);
      const res = await getUserPermissions({
        userId: this.userInfo.userId,
      });
      if (res.code === 200) {
        // 0 admin 1油企 2油站 3员工 5区域经理 6业务员
        this.userLevel22 = res.data;
      }
    },

    // 退出
    handleExit() {
      let token = getToken();
      logout(token).then((res) => {
        if (res && res.code === 200) {
          removeToken();
          this.$refs.uToast.show({
            message: res.msg,
            duration: 2000,
          });
          uni.setStorageSync("logout", "today");
          uni.redirectTo({
            url: "/pages/index/login",
          });
        }
      });
    },

    // 点击事件
    skipPage(item) {
      if (item.pageUrl) {
        if (item.name === "班结记录") {
          let targetUrl = item.pageUrl;
          targetUrl += "?param=" + 1;
          uni.navigateTo({
            url: targetUrl,
          });
        } else {
          uni.navigateTo({
            url: item.pageUrl,
          });
        }
      } else {
        this.handleScanCode();
      }
    },

    //点击设置
    setTings() {
      uni.navigateTo({
        url: "/pages/index/settings",
      });
    },

    // 查询会员
    // searchMember() {
    // 	console.log('查询会员');
    // 	uni.navigateTo({
    // 		url: '/pages/index/searchMember',
    // 	});
    // },
  },
};
</script>
<style lang="scss">
.all-ioc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.operate-button {
  width: 100%;
  position: absolute;
  bottom: 10px;
  background-color: #fff;
  border: 1px solid #ff4445;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  color: #ff4445;
  font-size: 30rpx;
  border-radius: 43rpx;
}

.operate-container {
  margin-left: 7%;
  width: 76%;
  position: absolute;
  bottom: 0px;
  height: 76rpx;
}

.menu-text {
  width: 130rpx;
  font-size: 13px;
  text-align: center;
}

.menu-viewimg {
  width: 130rpx;
  height: 120rpx;
  text-align: center;
}

.menu-img {
  width: 110rpx;
  height: 110rpx;
}

.menu-cygn {
  font-size: 17px;
  font-weight: 800;
  padding-top: 20px;
  margin-bottom: 25px;
}

.head-enterpriseName {
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 17px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  // white-space: nowrap;
}

.head-phone {
  overflow-wrap: break-word;
  color: rgba(145, 149, 171, 1);
  font-size: 14px;
  // font-weight: NaN;
  white-space: nowrap;
  margin: 10px 0rpx 0rpx 0rpx;
}

.logo {
  display: block;
  width: 110upx;
  height: 110upx;
  margin: 20px;
}

.head-contatiner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: 15vh;
  background-color: #fff;
}

.con-my-wraper {
  height: 100vh;
  background-color: #f5f5f9;
  position: relative;

  .menu-contatiner {
    position: relative;
    margin-top: 5px;
    padding: 0px 20px;
    height: 73vh;
    background-color: #fff;

    .menu-item {
      width: 130rpx;
      margin: 19rpx 18rpx 20rpx 18rpx;
      text-align: center;
    }
  }
}
</style>
